<template>
    <div class="allForTitle">
        <!--        左-->
        <div :class="titleShow?'title-left':'left'">
            <img src="../assets/logo-header.08ec1297.png"/>
            <!--            <router-link to="/index">返回首页</router-link>-->
        </div>
        <!--        中-->
        <div :class="titleShow?'title-mid':'mid'">
            <div style="width: 250px;float: left">
                <indexTirle v-show=titleShow class="index-tirle"></indexTirle>
            </div>
            <div>
                <div class="float-right search">搜索</div>
                <div class="input">
                    <input type="text" placeholder="搜索课程">
                </div>
            </div>
        </div>
        <!--        右-->
        <div class="right float-right" @click="showForAlert">
            <div>
                <el-dropdown>
                    <span class="el-dropdown-link">
                        <span><i class="el-icon-shopping-cart-1"></i></span>
                        <!--            竖线-->
                        <div class="axis"></div>
                        <span class="max-width" v-if="$store.state.isLogin">
                            {{$store.state.userMessage.nickname}}
                        </span>
                        <span class="max-width" v-if="!$store.state.isLogin">
                            {{"登录/注册"}}
                        </span>
                        <img :src="$store.state.isLogin?$store.state.userMessage.avatarUrl:heatImg"/>
                        </span>
                    <div v-if="$store.state.isLogin">
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><a href="/myroom" class="normal">个人中心</a>
                            </el-dropdown-item>
                            <el-dropdown-item>我的课程</el-dropdown-item>
                            <el-dropdown-item>我的订单</el-dropdown-item>
                            <el-dropdown-item><div @click="clearDataPoint">退出登录</div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </div>
                </el-dropdown>
            </div>
        </div>
        <alertLogin :alert="alert"></alertLogin>
        <indexNav v-show=!titleShow></indexNav>
    </div>
</template>

<script>
    import indexTirle from "../components/indexNav"
    import indexNav from "./indexNav";
    import alertLogin from "./alertLogin";
    import {clearData} from "../api/userLogin";
    // import {mapState} from "vuex";
    import myfill from "../assets/个人_fill.png"
    export default {
        name: "useTitle.vue",
        props: {
            titleShow: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                //控制三个弹窗的
                alert: false,
                login: false,
                regist: false,
                userName:"",
                linshi:"",
                heatImg:myfill
            }
        },
        components: {
            indexTirle,
            indexNav,
            alertLogin,
        },
        created() {
        },
        methods: {
            showForAlert() {
                this.alert = !this.alert
            },
            clearDataPoint(){
                clearData().then(res => {
                    console.log(res)
                    location.reload()
                })
                this.$store.commit("updataLogin",false)

            },
        },
    }
</script>

<style scoped lang="less">

    .allForTitle {
        overflow: hidden;
        width: 1200px;
        margin: auto;
        padding: 10px 0px;
    }

    /*    浅黑*/
    @colorSly: rgba(167, 167, 167, 0);
    @colorGreen: rgb(5, 219, 149);
    /*中间*/

    .mid,
    .title-mid {
        /*综合设置*/
        float: left;
        box-sizing: border-box;

        margin-top: 22px;
        /*输入框*/

        .input {
            border: 1px solid @colorSly;
            border-radius: 20px;
            float: right;

            input {
                width: 292px;
                height: 38px;
                border: 1px solid #cdcdcd;
                box-sizing: border-box;
                outline: none;
                margin-left: 15px;
                font-size: 14px;
                padding: 6px 11px;
                border-radius: 20px 0px 0px 20px;
                /*    强制对齐的操作*/
                position: relative;
                left: 1px;
                top: -1px;
            }

            input:focus {
                border: 1px solid @colorGreen;
                box-shadow: 0px 0px 5px @colorGreen;
            }
        }


        /*搜索框*/

        .search {
            width: 80px;
            float: right;
            border: 1px solid @colorSly;
            border-radius: 0px 20px 20px 0px;
            background-color: @colorGreen;
            height: 38px;
            box-sizing: border-box;
            line-height: 36px;
            color: #ffffff;
            text-align: center;
        }

        .index-tirle {
            /*float: left;*/
            position: relative;
            top: 5px;
        }
    }

    .mid {
        width: 400px
    }

    .title-mid {
        /*综合设置*/
        float: left;
        width: 640px !important;
        overflow: hidden;
    }

    /*右*/
    .right {
        float: right;
        margin-top: 28px;
        margin-right: 50px;

        .axis {
            display: inline-block;
            height: 18px;
            border-right: 1px solid #acacac;
            position: relative;
            top: -5px;
        }

        span {
            cursor: pointer;
            position: relative;
            font-size: 14px;
            color: #3d3d3d;
            top: -10px;
            padding: 10px;
            /*字体图标*/

            i {
                font-size: 18px;
            }
        }
    }
    .max-width {
        display: inline-block;
        max-width: 110px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        top: 3px!important;
    }
    /*下拉菜单相关*/
    /deep/
    .el-dropdown-menu__item:not(.is-disabled):hover {
        color: #00cf8c !important;
        background-color: #f1fff3;
    }

    .el-dropdown-menu__item:not(.is-disabled) {
        position: relative;
        /*top: -15px;*/
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;

    }
    .el-dropdown-link>img {
        height: 32px;
        width: 32px;
        border-radius: 16px;
    }

    /deep/
    el-dropdown-menu {
        position: relative;
        top: 25px !important;
    }

    .el-icon-arrow-down li {
        font-size: 12px;
    }
    .normal {
        color: #3d3d3d;
        text-decoration:none
    }
    .normal:hover {
        color: #00cf8c
    }
    /*左*/
    .left {
        float: left;
        margin-right: 200px;
    }

    .title-left {
        float: left;
        margin-right: 40px;

        /*width: 244px;*/
    }


    /*    公共class*/
    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }
</style>